package com.csw.compose.ui.module.component.advanced

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.TimeInput
import androidx.compose.material3.TimePicker
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.LargeSpacer
import com.csw.compose.ui.components.NormalSpacer
import com.csw.compose.ui.components.OlItem
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage
import java.util.Calendar

@Preview(heightDp = 1600)
@Composable
fun TimePickerPagePreview() {
    BasePage({}, "时间选择器（TimePicker）") {
        TimePickerPage()
    }
}

class TimePickerPageData {
    companion object : Destination("TimePickerPage")
}

/**
 * [参考](https://developer.android.google.cn/develop/ui/compose/components/datepickers?hl=zh-cn)
 */
@OptIn(ExperimentalLayoutApi::class, ExperimentalMaterial3Api::class)
@Composable
fun TimePickerPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        PrimaryTitle("简介")
        BodyText("在应用中快速实现时间选择功能，提供了嵌入页面的选择器组件，也支持通过对话框选择")

        NormalSpacer()
        val currCalendar = remember { Calendar.getInstance() }
        val state = rememberTimePickerState(
            initialHour = currCalendar.get(Calendar.HOUR_OF_DAY),
            initialMinute = currCalendar.get(Calendar.MINUTE),
            is24Hour = false
        )
        Text("${state.hour}:${state.minute}")
        NormalSpacer()
        TimePicker(state = state)
        UlItem("TimePicker")
        LabelText("时间选择器组件，带拨号盘用于选择时间，通过状态来设置与获取时间")
        OlItem(1,"initialHour")
        LabelText("初始选中的小时，默认0")
        OlItem(2,"initialMinute")
        LabelText("初始选中的分钟，默认0")
        OlItem(3,"is24Hour")
        LabelText("选择器是否采用24小时制，默认是，选择否则拨号盘与现实时钟一致，这样会更好看点")

        LargeSpacer()
        TimeInput(state = state)
        UlItem("TimeInput")
        LabelText("时间输入组件，可直接输入时间，可选参数与时间选择器一致，组件对用户输入进行了限制，所以无需开发者做过多的设置")



    }
}